<template>
	<view style="overflow: hidden;" @click="goinfo">
		<block v-if="!line">
			<view :class="[isList?'singleList':'single']">
				<image class="img" :src="MonvieItem.movieImg"></image>
				<view class="title">{{MonvieItem.movieName}}</view>
				<view class="score">
					<block v-if="MonvieItem.movieType!='即将上映'">
						<tui-rate :current="MonvieItem.movieScore" :quantity="5" :size="13" active="#FFB712" :hollow="true"></tui-rate>
						<text class="NumberSoc">{{MonvieItem.movieScore}}</text>
					</block>
					<block v-else>
						<view>
							暂无评分
						</view>
					</block>
				</view>
			</view>

		</block>
		<block v-else>
			<view class="img-list bottom-cell-group line">
				<image class="img" :src="MonvieItem.movieImg"></image>
				<view class="both">
					<view class="title">{{MonvieItem.movieName}}</view>
					<view class="type">{{MonvieItem.movieType}}</view>
					<view class="score">
						<block v-if="MonvieItem.movieType!='即将上映'">
							<tui-rate :current="MonvieItem.movieScore" :quantity="5" :size="13" active="#FFB712" :hollow="true"></tui-rate>
							<text class="NumberSoc">{{MonvieItem.movieScore}}</text>
						</block>
						<block v-else>
							<view>
								暂无评分
							</view>
						</block>
					</view>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		},
		props: {
			MonvieItem: {
				default: {}
			},
			isList: {
				type: Boolean,
				default: false
			},
			line: {
				type: Boolean,
				default: false
			}
		},
		methods: {
			goinfo() {
				if(this.$store.getters.getisLogin){
					this.$common.navigateTo('/pages/info/info?movieId=' + this.MonvieItem.movieId)
				}else{
					this.$common.jumpToLogin()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	view.single:nth-child(1) {
		margin-left: 7px;
	}

	view.single {
		width: 200upx;
		padding: 0 5upx;
		margin: 0;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;

		.img {
			background-size: cover;
			background-position: center center;
			width: 200upx;
			height: 286upx;
		}

		.title {
			padding-top: 4%;
			font-size: 32upx;
			text-align: center;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			width: 180upx;
		}

		.score {
			color: #aaa;
			text-align: center;

			.NumberSoc {
				margin-left: 10upx;
				font-size: 30upx;

			}
		}

	}

	view.singleList {
		width: 32.2vw;
		padding: 0 28upx;
		margin: 0;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		vertical-align: middle;

		.img {
			background-size: cover;
			background-position: center center;
			width: 200upx;
			height: 286upx;
		}

		.title {
			padding-top: 4%;
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
			font-size: 32upx;
			text-align: center;
			width: 180upx;
		}

		.score {
			color: #aaa;
			text-align: center;

			.NumberSoc {
				margin-left: 10upx;
				font-size: 30upx;

			}
		}

	}

	.img-grids,
	.img-list {
		background-color: #fff;
	}

	.cell-item {
		border: none;
		/* padding-bottom: 0; */
	}

	.grids-goods-name {
		font-size: 24upx;
	}

	.line {
		padding: 20upx 0upx;
		border-bottom: 1upx solid #ccc;
		width: 100vw;
		display: flex;
		margin: 20upx auto;

		.img {
			flex: 0 0 auto;
			width: 200upx;
			height: 200upx;
		}

		.both {
			margin-left: 20upx;
			display: flex;
			width: 450upx;
			flex-direction: column;
			justify-content: center;

			.title {
				margin-bottom: 20upx;
				width: 100%;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
			}

			.type {}
		}
	}
</style>
